<template>
	<view class="container">
		<view class="visitor">
			<view class="outside">
				<view class="within">
					<view class="info">
						<view class="name">
							<text>{{infoData.name}}</text>
							<!-- <text class="classType">【门诊】</text> -->
							<view class="btn m-l-30" @click="showVisitCard=true">
								<img src="@/static/images/qiehuan.png" style="width:29rpx;margin-right:8rpx;"></img>
								切换就诊人
							</view>
						</view>
						<view class="cord">
							卡号
						</view>
						<view>{{$desensitizationNormalStr(infoData.cardNum)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="timeViewWrap">
			<view class="timeView">
				<view class="switchTime">
					<view class="left" @click="arrowUp">
						<u-icon name="arrow-left"></u-icon>
						上一天
					</view>
					<view class="center" @click="showpop">
						{{times}}
						<u-icon name="arrow-down-fill" color="#808080" size="10"></u-icon>
					</view>
					<view class="right" @click="arrowDown">
						下一天
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="num">
					<view class="info">本日花费金额</view>
					<view class="money">{{ponsin.remSum}}</view>
				</view>
				<view class="overview">
					<view class="residue">
						押金总额：<text class="residue_money">￥{{ponsin.totalDeposit}}</text>
					</view>
					<view class="accumulate">
						消费金额：<text class="accumulate_money">￥{{ponsin.accumFee}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="dividers"></view>
		<view class="details">
			<view class="title">
				支出明细
			</view>
			<view class="items">
				<view class="item">
					<view class="item_title">
						<view class="name titles">
							项目名称
						</view>
						<view class="price titles">
							单价/元
						</view>
						<view class="num titles">
							数量
						</view>
						<view class="total titles">
							总价/元
						</view>
					</view>
					<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 700rpx)">
						<view class="item_title" v-for="(item,index) in detailList" :key="index">
							<view class="name">
								{{item.feeName}}
							</view>
							<view class="price">
								{{item.amount}}
							</view>
							<view class="num">
								{{item.num}}
							</view>
							<view class="total">
								{{item.sumBill}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- <u-calendar :defaultDate="[this.times]" :monthNum="1200" :maxDate="maxDate" :minDate="minDate" :show="showTime"
			mode="single" @confirm="changeTime" @close="showTime = false"></u-calendar> -->
		<u-datetime-picker :show="showTime" v-model="this.times" mode="date" @confirm="changeTime"
			@cancel="showTime = false"></u-datetime-picker>

		<!-- 切换就诊人 -->
		<u-popup :show="showVisitCard" :round="10" :safeAreaInsetBottom="true" mode="bottom">
			<switchVisitCard :visitData="visitList" :relations="relationTrans" @closeVisit="close" />
		</u-popup>
	</view>
</template>

<script>
	import {
		getPatientBaseList
	} from "@/api/card/index.js"
	import {
		getInpatientInfo,
		getOneDayDetail
	} from "@/api/beInHospital/index.js"
	import switchVisitCard from '@/components/switchVisitCard/index.vue';
	import {
		getDictType
	} from "@/api/system/public.js";
	import {
		getDate,
		getTimeStamp,
		getCurrentDate
	} from "@/utils/common.js";
	import {
		data
	} from "../../uni_modules/uview-ui/libs/mixin/mixin";
	import {
		multiply,
		add,
		subtract,
		divide
	} from "accurate-core";
	export default {
		components: {
			switchVisitCard,
		},
		data() {
			return {
				minDate: '1999-12-12',
				maxDate: '',
				infoData: {},
				showVisitCard: false,
				relationTrans: {},
				visitList: [],
				showTime: false,
				times: '',
				ponsin: {},
				detailList: []
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('currentVisitCard')) {
				this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
				this.getInpatientInfo()
			}
			this.times = getCurrentDate()
			this.getDict()
			this.getCardList()
		},
		onPullDownRefresh() {
			this.getInpatientInfo()
		},
		methods: {
			/* 字典 */
			getDict() {
				getDictType({
					dictType: 'sys_relation'
				}).then(res => {
					if (res.code == 200) {
						res.rows.forEach(item => {
							this.relationTrans[item.dictValue] = item.dictLabel
						})
					}
				})
			},
			showpop() {
				this.showTime = true
			},
			/* 获取清单详情 */
			getOneDayDetail() {
				let obj = {
					"endTime": this.times,
					"idNum": this.infoData.idNum || '',
					"name": this.infoData.name || '',
					"searchDate": this.times || '',
					"startTime": this.times || '',
					"zyh": this.infoData.zyh || '',
				}
				getOneDayDetail(obj).then(res => {
					//数据请求完成之后停止下拉刷新
					uni.stopPullDownRefresh();
					let gentle = res.data.reduce((gentle, item) => {
						return gentle + Number(item.sumBill);
					}, 0);
					this.ponsin.remSum = (Math.floor(multiply(gentle, 100)) / 100).toFixed(2);
					this.detailList = res.data
				})
			},
			getInpatientInfo() {
				let obj = {
					"name": this.infoData.name,
					"idNum": this.infoData.idNum,
				}
				getInpatientInfo(obj).then(res => {
					this.ponsin.totalDeposit = res.data.totalDeposit
					this.ponsin.accumFee = res.data.accumFee
					this.getOneDayDetail()
				}).catch(error => {
					//数据请求完成之后停止下拉刷新
					uni.stopPullDownRefresh();
					this.detailList = []
					this.ponsin.remSum = ''
					this.ponsin.totalDeposit = ''
					this.ponsin.accumFee = ''
				})

			},
			close() {
				if (uni.getStorageSync('currentVisitCard')) {
					this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
					this.getInpatientInfo()
				}
				this.showVisitCard = false
				// console.log('close');
			},
			/* 上一天 */
			arrowUp() {
				let times = this.times
				let mm = new Date(new Date(times).getTime() - 24 * 60 * 60 * 1000)
				let y2 = mm.getFullYear();
				let m2 = mm.getMonth() + 1 < 10 ? "0" + (mm.getMonth() + 1) : mm.getMonth() + 1;
				let d2 = mm.getDate() < 10 ? "0" + mm.getDate() : mm.getDate();
				let str2 = y2 + "-" + m2 + "-" + d2
				this.times = str2
				this.getOneDayDetail()
			},
			/* 下一天 */
			arrowDown() {
				// let times = this.times + ' ' + '00:00:00'
				// let mm = new Date(times).setTime(new Date(times).getTime() + 24 * 60 * 60 * 1000)
				// this.times = getTimeStamp(mm)
				// this.getOneDayDetail()
				let times = this.times
				let mm = new Date(new Date(times).getTime() + 24 * 60 * 60 * 1000)
				let y2 = mm.getFullYear();
				let m2 = mm.getMonth() + 1 < 10 ? "0" + (mm.getMonth() + 1) : mm.getMonth() + 1;
				let d2 = mm.getDate() < 10 ? "0" + mm.getDate() : mm.getDate();
				let str2 = y2 + "-" + m2 + "-" + d2
				this.times = str2
				this.getOneDayDetail()
			},
			changeTime(e) { //切换时间
				console.log(e)
				this.times = getDate(e.value)
				this.showTime = false
				this.getOneDayDetail()
			},
			getCardList() {
				let openid = uni.getStorageSync('openid') || ''
				let params = {
					hospitalCode: JSON.parse(uni.getStorageSync('hospital')).hospitalCode,
					openId: openid,
				}
				getPatientBaseList(params).then(res => {
					if (res.code == 200) {
						this.visitList = res.rows
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(245, 245, 245);
	}

	.dividers {
		// width: 98%;
		margin: 0 15rpx;
		height: 20rpx;
		border-radius: 8px;
		background-color: #82AFFD;
	}

	.details {
		// width: 95%;
		margin: 0 24rpx;
		background-color: #fff;
		border-radius: 0 0 8px 8px;
		padding: 0 20rpx;
		position: relative;
		top: -10rpx;

		.title {
			padding: 24Rpx 0;
			border-bottom: 1px solid #eee;
			font-weight: bold;
			color: #333;
		}

		.items {
			.item {
				.item_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-align: center;
					padding: 8rpx 0;
					border-bottom: 1px solid #eee;
					.price {
						width: 23%;
						text-align: right;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
					}

					.num {
						width: 15%;
						text-align: right;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
					}

					.total {
						width: 23%;
						text-align: right;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
					}

					.titles {
						padding: 12rpx 0;
						color: #999;
						text-align: right;
						font-size: 13px;
					}

					.name {
						flex: 1;
						text-align: left;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.timeViewWrap {
		width: 100%;
		padding: 24rpx 0 0 0;
		background: url('@/static/images/oneDay.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		color: #808080;
		top: -12rpx;

		.timeView {
			// width: 95%;
			margin: 0 24rpx;
			background-color: #fff;
			border-radius: 8px;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			padding: 12rpx;

			.num {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 24rpx 0;

				.info {
					font-size: 25rpx;
					color: #808080;
				}

				.money {
					font-weight: 500;
					font-size: 70rpx;
					color: #4D8EFF;
				}
			}

			.overview {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.residue {
					font-size: 25rpx;
					color: #808080;

					.residue_money {
						font-weight: 600;
					}
				}

				.accumulate {
					font-size: 25rpx;
					color: #808080;
					font-weight: 500;

					.accumulate_money {
						font-weight: 600;
					}
				}
			}

			.switchTime {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.left,
				.center,
				.right {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.visitor {
		width: 100%;
		// background-color: rgb(92, 147, 249);
		background: url('@/static/images/report-small-bg.png') no-repeat left center, linear-gradient(180deg, rgba(197, 218, 255, 1) 0%, rgba(92, 147, 249, 1) 100%);
		background-size: auto 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 24rpx 0 24rpx;
		color: #3C537D;

		.outside {
			width: 100%;
			background-color: #fff;
			padding: 12rpx 12rpx 0 12rpx;
			border-radius: 8px 8px 0 0;
			background: url('@/static/images/card_bg.png') no-repeat;
			background-size: 100% 100%;

			.within {
				border-radius: 8px 8px 0 0;

				.info {
					padding: 16rpx 28rpx 20rpx;
					font-size: 34rpx;

					.name {
						display: flex;
						align-items: center;

						.classType {
							display: inline-block;
							margin: 0 36rpx;
						}

						.btn {
							font-size: 28rpx;
							padding: 7rpx 14rpx;
							background: linear-gradient(90deg, rgba(77, 142, 255, 1) 0%, rgba(94, 150, 247, 1) 100%);
							color: #fff;
							display: flex;
							align-items: center;
							border-radius: 5px;
						}
					}

					.cord {
						font-size: 28rpx;
						padding: 16rpx 0 8rpx;
					}
				}
			}
		}
	}
</style>